import React, { useState, useEffect } from 'react';
import { Alert, Button, Modal } from 'antd';
import { FormattedMessage, useIntl } from 'umi';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import InvADJModal from './InvADJModal';
import QuickMenu from '@/components/QuickMenu';
import StockTransfer from './components/stockTransfer';
import OperpQuery from '@/components/OperpQuery';
import request from '@/utils/request';

const apiURL = '/api/services/app/PartBin/';

const ViewPage: React.FC = () => {
  const [visible, setVisible] = useState(false);
  const [visible2, setVisible2] = useState(false);
  const [formVals, setFormVals] = useState({});
  const [totOnhand, setTotOnhand] = useState(0);
  const [totAva, setTotAva] = useState(0);
  const [freshNum, setFreshNum] = useState(0);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [selectedRows, setSelectedRows] = useState([]);
  const intl = useIntl();

  useEffect(() => {
    // componentDidMount logic
  }, []);

  const switchVisible = (visible = false, formVals = {}) => {
    setVisible(visible);
    setFormVals(formVals);
  };

  const handleSubmit = (values: any) => {
    const { warehouseCode, ...res } = values;
    request(apiURL + 'InvAdjust', {
      method: 'POST',
      data: {
        whseCode: warehouseCode,
        ...res,
      },
    }).then((response) => {
      if (response) {
        if (response.success) {
          switchVisible();
          setFreshNum(freshNum + 1);
        }
      }
    });
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: (_selectedRowKeys: any, selectedRows: any) => {
      setSelectedRowKeys(_selectedRowKeys);
      setSelectedRows(selectedRows);
    },
  };

  return (
    <PageHeaderWrapper title={false} breadcrumbRender={false} ghost>
      <OperpQuery
        rowSelection={rowSelection}
        sysReportName="ReportInvCheck"
        scroll={{ x: 'max-content', y: '600px' }}
        freshNum={freshNum}
        callback={(record) => switchVisible(true, { ...record })}
        onload={(data) => {
          let totOnhand = 0;
          let totAva = 0;
          data.forEach((element: any) => {
            totOnhand += element.onhandQty;
            totAva += element.avaQty;
          });
          setTotOnhand(totOnhand);
          setTotAva(totAva);
        }}
        toolBarRender={[
          <Alert
            message={intl.formatMessage({ id: 'pages.doubleClickEdit' })}
            type="warning"
            showIcon
            closable
          />,
          <a>
            {intl.formatMessage({ id: 'pages.totalInventory' })}：{totOnhand.toFixed(4)}，
            {intl.formatMessage({ id: 'pages.totalAvailable' })}：{totAva.toFixed(4)}
          </a>,
          <Button type="primary" onClick={() => setVisible2(true)}>
            <FormattedMessage id="pages.StockTransfer" />
          </Button>,
          <QuickMenu path="/part/InvADJ" icon="icon-todo_list" title="pages.InvADJ" />,
        ]}
      />

      <Modal
        title={<FormattedMessage id="menu.part.InvADJ" />}
        width={640}
        bodyStyle={{ padding: 24 }}
        visible={visible}
        destroyOnClose
        footer={null}
        onCancel={() => setVisible(false)}
      >
        <InvADJModal formVals={formVals} onCancel={switchVisible} onSubmit={handleSubmit} />
      </Modal>
      <Modal
        title={<FormattedMessage id="pages.StockTransfer" />}
        width={640}
        bodyStyle={{ padding: 24 }}
        visible={visible2}
        destroyOnClose
        footer={null}
        onCancel={() => setVisible2(false)}
      >
        <StockTransfer />
      </Modal>
    </PageHeaderWrapper>
  );
};

export default ViewPage;
